<!-- 右侧面板模块 -->
<template>
    <div class="right-panel">
        <div class="right-panel-title">
            <SettingOutlined class="right-panel-title-icon" />
            <span>设置</span>
        </div>

        <div class="panel-box">
            <ul class="box-tabs">
                <li class="box-tabs-item" v-for="item in data.tabsData" :class="{active: item.active}"
                    @click="handleTabsClick(item)">{{item.title}}</li>
            </ul>
        </div>

        <div class="options-box">
            <template v-if="selectItem">
                <div class="property-box" v-show="data.currentPanel == 'property'">
                    <div class="panel-from">
                        <div class="panel-form-item">
                            <div class="item-label">组件ID</div>
                            <div class="item-input">
                                <a-input v-model:value="selectItem.id" placeholder="请输入" disabled />
                            </div>
                        </div>
                        <div class="panel-form-item">
                            <div class="item-label">标题</div>
                            <div class="item-input">
                                <a-input v-model:value="selectItem.label" placeholder="请输入" />
                            </div>
                        </div>
                        <div class="panel-form-item">
                            <div class="item-label">布局类型</div>
                            <div class="item-input">
                                <a-radio-group v-model:value="selectItem.layoutType" @change="layoutTypeChange">
                                    <a-radio-button value="flow">默认</a-radio-button>
                                    <a-radio-button value="free">自由</a-radio-button>
                                </a-radio-group>
                            </div>
                        </div>
                        <div class="panel-form-item" v-if="selectItem.layoutType == 'free'">
                            <div class="item-label">层级</div>
                            <div class="item-input">
                                <a-input-number v-model:value="selectItem.componentProps.style.zIndex"></a-input-number>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="style-box" v-show="data.currentPanel == 'style'">

                    <div class="panel-from" v-if="selectItem.notUseDefaultStyle != true">
                        <div class="panel-form-item">
                            <div class="item-label">组件宽度</div>
                            <div class="item-input">
                                <a-input v-model:value="selectItem.componentProps.style.width" placeholder="请输入"
                                    :min="0" style="width: 100%;" />
                            </div>
                        </div>
                        <div class="panel-form-item">
                            <div class="item-label">组件高度</div>
                            <div class="item-input">
                                <a-input v-model:value="selectItem.componentProps.style.height" placeholder="请输入"
                                    :min="0" style="width: 100%;" />
                            </div>
                        </div>

                        <div class="panel-form-item">
                            <div class="item-label">内边距</div>
                            <div class="item-input">
                                <a-input v-model:value="selectItem.componentProps.style.padding" placeholder="请输入" />
                            </div>
                        </div>

                        <div class="panel-form-item">
                            <div class="item-label">外边距</div>
                            <div class="item-input">
                                <a-input v-model:value="selectItem.componentProps.style.margin" placeholder="请输入" />
                            </div>
                        </div>

                        <div class="panel-form-item">
                            <div class="item-label">背景颜色</div>
                            <div class="item-input">
                                <dcColorPicker mode="input" v-model="selectItem.componentProps.style.backgroundColor" />
                            </div>
                        </div>
                        <div class="panel-form-item">
                            <div class="item-label">字体颜色</div>
                            <div class="item-input">
                                <dcColorPicker mode="input" v-model="selectItem.componentProps.style.color" />
                            </div>
                        </div>

                        <div class="panel-form-item">
                            <div class="item-label">透明度</div>
                            <div class="item-input">
                                <a-slider v-model:value="selectItem.componentProps.style.opacity" :min="0" :max="1"
                                    :step="0.01" />
                            </div>
                        </div>

                    </div>
                </div>

                <div class="actions-box" v-show="data.currentPanel == 'actions'">
                    <actions :selectItem="selectItem"></actions>
                </div>

                <component :is="data.optionContent" :selectItem="selectItem" :currentPanel="data.currentPanel" />

                <div class="property-box pt0" v-show="data.currentPanel == 'property'">
                    <div class="panel-from">
                        <formRulesEditor v-if="selectItem.isFormItem" :selectItem="selectItem"></formRulesEditor>
                    </div>
                </div>

            </template>
            <template v-if="!selectItem">
                <page-option :currentPanel="data.currentPanel"></page-option>
                <div v-show="data.currentPanel == 'actions'">
                    <actions :selectItem="selectItem"></actions>
                </div>
            </template>
        </div>

    </div>
</template>

<script setup>
import { reactive, watch, defineProps, defineAsyncComponent, onMounted } from 'vue'
import { getComponentInstance } from '../../componentManager.js'
import { generateData } from '../../pageManager.js'
import { revoke } from '../../common/util/revoke.js'
import formRulesEditor from '../../common/extens/formRulesEditor/formRulesEditor.vue'
import dcColorPicker from '../../common/extens/colorPicker/dcColorPicker.vue'
import pageOption from './pageOption.vue'
import actions from './actions.vue'


// emit事件
const emit = defineEmits(['handleSetSelectItem', 'handleResetSelectItem'])

const data = reactive({
    currentPanel: "property",
    optionContent: undefined,
    styleValue: {
        width: "",
        widthUnit: "px",
        height: "",
        heightUnit: "px"
    },
    unitData: ['px', '%', 'em', 'rem', 'pt', 'vw', 'vh'],
    tabsData: [
        {
            title: "属性",
            type: "property",
            active: true
        },
        {
            title: "样式",
            type: "style",
            active: false
        },
        {
            title: "事件",
            type: "actions",
            active: false
        }
    ],
})

const props = defineProps({
    selectItem: {
        type: Object,
        required: false
    },
})

// 监听数据的变化
watch(() => props.selectItem, (newValue, oldValue) => {

    // console.log("selectItem-oldValue",oldValue)
    // console.log("selectItem-newValue",newValue)

    // props.selectItem.componentProps.style.opacity = props.selectItem.componentProps.style.opacity ? props.selectItem.componentProps.style.opacity : 1;

    setComponentOptions()
    // if (data.currentPanel == "style") {
    //     // setStyleValue();
    // }
})

onMounted(() => {
    // 
})


/**
 * @desc 组件布局类型改变
 */
const layoutTypeChange = (e) => {
    // console.log("layoutTypeChange：：", e)
    let value = e.target.value
    let valueStr = ""
    if (value == 'flow') {
        valueStr = "默认"
    } else if (value == 'free') {
        valueStr = "自由"
        // if (!props.selectItem.x) props.selectItem.x = 0;
        // if (!props.selectItem.y) props.selectItem.y = 0;
    }
    revoke.add(generateData.data, `将【${props.selectItem.name}】组件的布局类型切换至【${valueStr}】`)
}


/**
 * @method
 * @desc 设置组件optionContent属性
 */
const setComponentOptions = () => {
    let item = props.selectItem

    if (item != undefined) {
        let itemInstance = getComponentInstance(item.type)
        // console.log("AAAA获取的组件实例：",itemInstance);
        let componentOptions = itemInstance.componentOptions
        // if (componentOptions) {
        data.optionContent = componentOptions
        // } else {
        //     data.optionContent = defineAsyncComponent(modules[`/src/components/dc-page-designer/component/${item.type}/${item.optionName}.vue`])
        // }
    } else {
        // alert("未加载成功！")
    }
}

/**
 * @method
 * @param {Object} item 标签页对象
 * @desc 点击标签页
 */
const handleTabsClick = (item) => {
    data.tabsData.forEach(item => {
        item.active = false
    })
    item.active = true
    data.currentPanel = item.type
}
</script>

<style lang="less" scoped>

.right-panel {
    width: 270px;
    height: 100%;
    position: relative;
    border-left: 1px solid var(--borderColor);

    .right-panel-title {
        height: 37px;
        display: flex;
        align-items: center;
        color: var(--defaultCoolor);
        border-bottom: 1px solid var(--borderColor);
        padding: 0 15px;
        font-size: 14px;

        .right-panel-title-icon {
            margin-right: 5px;
        }
    }

    .panel-box {
        width: 100%;

        .box-tabs {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            border-bottom: 1px solid var(--borderColor);

            .box-tabs-item {
                flex: 1;
                display: flex;
                padding: 10px;
                justify-content: center;
                align-items: center;
                font-size: 14px;
                cursor: pointer;
                position: relative;

                &.active {
                    color: var(--activeColor);
                    position: relative;
                    transition: 0.3s all;

                    &::after {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 2px;
                        background-color: #3e8bf2;
                        transition: 0.3s all;
                    }
                }
            }
        }
    }

    .options-box {
        height: calc(100% - 74px);
        overflow: auto;

        .style-box,
        .property-box {
            padding: 15px 15px 0;
        }
    }
}

:deep(.ant-collapse .ant-collapse-content > .ant-collapse-content-box) {
    padding: 8px;
}

:deep(.ant-collapse > .ant-collapse-item > .ant-collapse-header) {
    padding: 10px;
    background-color: #f5f5f5;
}

:deep(.ant-collapse > .ant-collapse-item:last-child),
:deep(.ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header) {
    border-radius: 0 0 0 0 !important;
}
</style>